<template>
    <div>
        <addPermissionsBtn></addPermissionsBtn>
        <div class="staffPermission">
            <el-row>
                <el-col :span="24" style="min-height: 330px">
                    <el-table :header-cell-style="this.$store.state.headerCssObj" :cell-style="this.$store.state.cellCssObj" :data="currentData" border style="width: 100%">
                        <el-table-column prop="rolePerId" label="编号"></el-table-column>
                        <el-table-column prop="jobName" label="职位"></el-table-column>
                        <el-table-column prop="roleName" label="权限"></el-table-column>
                        <el-table-column prop="createBy" label="创建人"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                        <el-table-column prop="updateBy" label="更新人"></el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="editPermission(scope.row)">修改</el-button>
                                <el-button type="danger" size="mini"  @click="delPermission(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="pages">
                        <paging :obj = 'pagingData'></paging>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--编辑权限弹出框-->
        <el-dialog title="修改权限" :visible.sync="dialogFormVisible" width="500px" center :close-on-click-modal = 'false'>
            <el-form :model="editPermissionsData">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="editPermissionsData.rolePerId" autocomplete="off" placeholder="请输入权限编号" disabled></el-input>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-input v-model="editPermissionsData.jobName" autocomplete="off" placeholder="请输入职位" disabled></el-input>
                </el-form-item>
                <el-form-item label="权限" :label-width="formLabelWidth">
                    <el-select v-model="editPermissionsData.roleName" placeholder="请选择权限" style="width: 100%">
                        <el-option v-for="item in roleData" :key="item.value" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="toEditPermissionsBtn">提交</el-button>
            </div>
        </el-dialog>
        <!--删除权限弹出框-->
        <deleteDialog :deleteDialogVisible="myDeleteDialogVisible" @handleFun="myDelPermission" @cancel="myDeleteDialogVisible=false"></deleteDialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import addPermissionsBtn from "../../components/backgroundCom/staffPermissionsCom/addPermissionsBtn";    //新增按钮行

    export default {
        name: "staffPermissionsPage",
        components:{
            addPermissionsBtn,
        },
        data(){
            return{
                pageData:[],
                currentPage:1,
                pageNums:10,
                //-------------------------编辑权限部分-------------------------
                dialogFormVisible:false,   //编辑权限弹窗的显示状态
                formLabelWidth:'80px',   //编辑权限弹窗label的宽度
                editPermissionsData:{ //编辑权限的数据
                    rolePerId: '',
                    jobName: "",
                    roleId: "",
                    updateBy: "",
                    updateTime: "",
                },
                //-----------------删除权限部分-----------------
                myDeleteDialogVisible:false,     //删除弹出框状态
                delPower:{jobName:'',rolePerId:''},
            }
        },
        computed:{
            //表格显示数据
            currentData(){
                let thisData=this.$store.state.staffPermissionsStore.foundRolePerData.rolePerList;   //存的数据
                let thisPageSize=this.$store.state.staffPermissionsStore.pages.pageSize;  //存的页容量
                let thisPageNum=this.$store.state.staffPermissionsStore.pages.currentPage;  //存的页码
                thisData.length>thisPageSize ?
                    this.pageData=thisData.slice((thisPageNum-1)*thisPageSize,thisPageNum*thisPageSize) :
                    this.pageData=thisData;
                return this.pageData
            },
            //分页
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.$store.state.staffPermissionsStore.pages.currentPage = num;  //改变当前页
                        that.currentPage = that.$store.state.staffPermissionsStore.pages.currentPage;  //改变当前页
                        that.tablePermissionsInfo();
                    },
                    pageCount:that.$store.state.staffPermissionsStore.foundRolePerData.totalPage,//一共多少页
                };
                return data
            },
            //权限
            roleData(){
                return this.$store.state.staffPermissionsStore.permissionsData;
            }
        },
        methods:{
            ...mapActions(['userOperation','toDelPermissions','toEditPermission','showRolePerInfo','selectPermissionsByObj']),
            //查询表格数据
            tablePermissionsInfo(){
                //如果是显示所有
                if (this.$store.state.staffPermissionsStore.pageState==='showAll'){
                    this.showRolePerInfo({"pageCount":parseInt(this.$store.state.staffPermissionsStore.pages.currentPage), "pageSize": parseInt(this.$store.state.staffPermissionsStore.pages.pageSize)}).then(res=>{
                        if (res.code!==200){
                            // console.log(res)
                            this.$message({
                                type: 'error',
                                message: '员工信息加载失败'
                            });
                        }
                    });
                    //如果是显示查询
                }else if (this.$store.state.staffPermissionsStore.pageState==='showSelect'){
                    this.selectPermissionsByObj(this.$store.state.staffPermissionsStore.thisSelectObj).then(res=>{
                        // console.log(res);
                    })
                }

            },
            //用户操作日志
            staffOperation(str){
                let operation = {//用户操作
                    userName:this.$store.state.user.userName,//用户名
                    operationDate:this.$store.state.nowTime.time,//用户操作时间
                    operationMessage:str,//用户操作内容
                };
                this.userOperation(operation)//需要在操作完成后，调用处理用户操作的函数
            },
            //编辑权限
            editPermission(row){
                this.editPermissionsData.rolePerId = row.rolePerId;
                this.editPermissionsData.jobName = row.jobName;
                this.editPermissionsData.roleName = row.roleName;
                this.editPermissionsData.updateBy=this.$store.state.user.userName;//更改人
                this.editPermissionsData.updateTime=new Date(this.$store.state.nowTime.time);//更改时间
                this.dialogFormVisible=true;
            },
            //编辑权限的提交按钮
            toEditPermissionsBtn(){
                // console.log(this.editPermissionsData);
                this.toEditPermission(this.editPermissionsData).then(res=>{
                    if (res.code===200){
                        this.$message({
                            type: 'success',
                            message: '修改成功！'
                        });
                        this.staffOperation(`修改编号${this.editPermissionsData.rolePerId}下的权限${this.editPermissionsData.roleName}`); //修改成功，记录操作日志
                        this.dialogFormVisible=false;  //编辑权限弹窗的显示状态
                        this.tablePermissionsInfo();  //刷新表格
                    }else {
                        this.$message({
                            type: 'error',
                            message: '修改失败！'
                        });
                    }
                })
            },
            //删除权限
            delPermission(row){
                this.myDeleteDialogVisible=true;
                this.delPower.rolePerId=row.rolePerId;
                this.delPower.jobName=row.jobName;
                this.delPower.roleName=row.roleName;
            },
            //确认删除权限
            myDelPermission(){
                this.toDelPermissions(this.delPower).then(res=>{
                    if (res.code===200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.staffOperation(`删除编号${this.delPower.rolePerId}下权限${this.delPower.roleName}`);   //操作日志
                        if (this.$store.state.staffPermissionsStore.foundRolePerData.rolePerList.length<=1&&this.$store.state.staffPermissionsStore.pages.currentPage>1){
                            this.$store.state.staffPermissionsStore.pages.currentPage--;
                            this.currentPage=this.$store.state.staffPermissionsStore.pages.currentPage;
                        }
                        this.tablePermissionsInfo();  //刷新表格
                        this.myDeleteDialogVisible=false;
                    }else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        });
                    }
                });
            }
        },
        created() {
            this.showRolePerInfo({"pageCount":1, "pageSize": 5}).then(res=>{
                // console.log(res);
                // console.log(this.$store.state.staffPermissionsStore.foundRolePerData);
                if (res.code!==200){
                    // console.log(this.$store.state.staffPositionStore.foundJobData.totalPage)
                    this.$message({
                        type: 'error',
                        message: '职位信息加载失败'
                    });
                }
            })
        }
    }
</script>

<style scoped lang="less">
    .staffPermission{
        margin-top: 20px;
        .el-row{
            .el-col{
                text-align: center;
                .el-input,.diySelect{
                    margin-left: 10px;
                    width: 80%;
                }
                .pages{
                    margin-top: 20px;
                    text-align: center;
                }
            }
            .el-table{
                margin: auto;
            }
        }
        .el-dialog{
            #message{
                display: inline-block;
                text-align: center;
                width: 100%;
            }
            .dialog-footer{
                width: 100%;
            }
            div{
                text-align: center;
                margin: 5px auto;
                span{
                    display: inline-block;
                    text-align: center;
                    width: 20%;
                }
                .el-input{
                    display: inline-block;
                    text-align: center;
                    width: 60%;
                }
            }
        }
    }
</style>